import React, { Component } from 'react'
import { NavBar, Toast } from 'antd-mobile'
import "./Shop.less"
import { reqCartdelete, reqCartedit, reqCartlist } from '../../http/api'
import no from "../../assets/img/no.png"
import yes from "../../assets/img/yes.png"
import { connect } from "react-redux"
import { bindActionCreators } from '_redux@4.1.2@redux'
import { actions, getAll, GetAllPrice, getList } from '../../store/modules/shop'
class Shop extends Component {
    componentDidMount() {
        let {shop:{reqShopList}}=this.props
        reqShopList()
    }
    render() {
        let { goods,shop:{ deleteShop,addShop,subShop,checkedAll, checkedOne},allChecked, allPrice} = this.props
        return (
            <div className="home">
                <NavBar>商城</NavBar>
                {/* 渲染数据 */}
                {
                    goods.map((item,index) => (

                        <div key={item.id} className="item">
                            {/* <div>{item.goodsname}</div> */}
                            <div className="check" onClick={()=>checkedOne(index)}> 
                            {
                                    item.checked ? <img src={yes} alt="" /> : <img src={no} alt="" />
                                }
                            </div>
                            <img src={item.img} alt="" />


                            <div className="right">
                                <span className="name">{item.goodsname}</span>
                                <span className="price">&yen;{item.price}</span>
                                <div className="num">
                                    <span onClick={()=>addShop(item.id)}>+</span>
                                    <i> {item.num}</i>
                                    <span onClick={()=>subShop(item.id,item.num)}>-</span>
                                    <div  className="button" onClick={()=>deleteShop(item.id)}>删除</div>
                                </div>
                            </div>

                        </div>


                    ))
                }
                  {/* 全选 */}
            <div className="checked" onClick={() => checkedAll()}>
                
                {allChecked ?  <img src={yes} alt="" /> : <img src={no} alt="" />} 
                <span>全选</span>
                <span className="all">合计：&yen;{allPrice}</span>
            </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        goods: getList(state),
        allChecked: getAll(state),
        allPrice: GetAllPrice(state)
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        shop: bindActionCreators(actions, dispatch)
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Shop)
